<template>
    <van-tabbar v-model="activeTab" fixed route class="custom-tabbar">
        <van-tabbar-item v-for="(item, index) in tabItems" :key="index" 
            :icon="item.icon" 
            :to="item.to" 
            class="tabbar-item">
            <template #icon="props">
                <div class="icon-wrapper" :class="{ 'icon-active': props.active }">
                    <van-icon :name="item.icon" />
                </div>
            </template>
            {{ item.text }}
        </van-tabbar-item>
    </van-tabbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeTab = ref(0);

const tabItems = [
    { icon: 'home-o', text: '首页', to: '/' },
    { icon: 'search', text: '任务', to: '/Mtasklist' },
    { icon: 'orders-o', text: '订单', to: '/Morders' },
    { icon: 'balance-o', text: '钱包', to: '/Mwallet' },
    { icon: 'user-o', text: '我的', to: '/Mprofile' }
];
</script>

<style scoped>
.custom-tabbar {
    border-top: none;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95) !important;
    height: 46px !important;  /* 减小高度 */
    padding: 4px 0;  /* 减小内边距 */
}

.icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;  /* 减小图标容器尺寸 */
    height: 36px;
    margin-bottom: 2px;
    border-radius: 10px;  /* 稍微减小圆角 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.van-tabbar-item__icon) {
    font-size: 20px;  /* 减小图标尺寸 */
    margin-bottom: 3px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.van-tabbar-item__text) {
    font-size: 11px;  /* 稍微减小文字尺寸 */
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
}

:deep(.van-tabbar-item--active) {
    background: transparent;
}

:deep(.van-tabbar-item--active .van-tabbar-item__text) {
    color: #4f46e5;
    font-weight: 600;
    transform: scale(1.05);
}

:deep(.van-tabbar-item:active) {
    opacity: 0.8;
}

/* 添加发光效果 */
.icon-active::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    filter: blur(12px);
    opacity: 0.3;
    z-index: -1;
}

/* 添加涟漪效果 */
.icon-active::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: ripple 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>